---
title: 图片移除背景
comments: false
---

<!DOCTYPE html>
<html>

<head>
  <title>Removebg example using onnxruntime-web</title>
  <script src="../../poem/js/shufaDictJS.js"></script>
  <style>


    #container {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #dropArea {
      position: absolute;
      /* top: 0;
      left: 0; */
      /* width: 100%;
      height: 100%; */
      border: 2px dashed #ccc;
      /* display: flex; */
      justify-content: center;
      align-items: center;
      text-align: center;
      transition: background-color 0.3s;
    }

    #dropArea.hover {
      background-color: #ebe8e7;
    }

    #dropArea p {
      font-size: 20px;
      color: #666;
    }

    canvas {
      display: block;
    }

    #loadingSpinner {
      
      display: none;
      position: absolute;
      width: 64px;
      height: 64px;
      border: 4px solid #ccc;
      border-top: 4px solid #f44336;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    #removeButton {
      display: none;
      /* position: absolute; */
      bottom: 32px;
      right: 32px;
      background-color: #f44336;
      color: white;
      border: none;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      font-size: 24px;
      cursor: pointer;
    }
    
  </style>
</head>

<body>
  <div id="container">
   <div id="loadingSpinner"></div>
    <div id="dropArea">
      <p>将图像拖放到此处或单击上传</p>
      <input type="file" id="imageInput" accept="image/*" style="display:none;" />
    </div>
    <canvas id="imageCanvas"></canvas>
   
  </div>
  <button id="removeButton">&times;</button>
 
  <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.min.js"></script>
  <script src="script.js"></script>
  <script>
   hiddenEle()

  </script>
</body>


</html>